<template>
  <div class="page bridge">
    <div class="page-container">
      <el-row :gutter="15" type="flex" style="width: 100%;height: 100%;margin: 0">
        <el-col :span="7" class="col">
          <el-row class="row">
            <Card title="服务类型">
              <ServiceType />
            </Card>
          </el-row>
          <el-row class="row">
            <Card title="月度服务趋势">
              <ServiceTrend />
            </Card>
          </el-row>
        </el-col>
        <el-col :span="10" class="col">
          <el-row class="row">
            <Card title="便民服务情况">
              <ProportionOfAlarmTypes />
            </Card>
          </el-row>
          <el-row class="row">
            <Card title="服务剪影">
              <ServiceSilhouette />
            </Card>
          </el-row>
        </el-col>
        <el-col :span="7" class="col">
          <el-row class="row">
            <Card title="常态勤务安排">
              <ServiceArrangement />
            </Card>
          </el-row>
          <el-row class="row">
            <Card title="便民高频服务">
              <ConvenientService />
            </Card>
          </el-row>
        </el-col>
        <div class="map">
          <BridgeMap></BridgeMap>
        </div>
      </el-row>
    </div>
  </div>
</template>
<script>
import Card from '@/components/Card.vue'
import BridgeMap from "@/components/Bridge/BridgeMap.vue";
import ServiceType from "@/components/Bridge/ServiceType.vue";
import ServiceTrend from "@/components/Bridge/ServiceTrend.vue";
import ProportionOfAlarmTypes from "@/components/Bridge/ProportionOfAlarmTypes.vue";
import ServiceSilhouette from "@/components/Bridge/ServiceSilhouette.vue";
import ServiceArrangement from "@/components/Bridge/ServiceArrangement.vue";
import ConvenientService from "@/components/Bridge/ConvenientService.vue";

export default {
  components: {
    ConvenientService,
    ServiceArrangement,
    ServiceSilhouette,
    ProportionOfAlarmTypes,
    ServiceTrend,
    ServiceType,
    BridgeMap, Card }

}
</script>
<style lang="scss" scoped>
.page.bridge{
  .page-container{
    width: 100%;
    height: 100%;
    .map{
      width: 100vw;
      height:100vh;
      z-index: 1;
      position: fixed;
      left: 0;
      top: 0;
    }
    .col{
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-start;
      position: relative;
      .row{
        width: 100%;
        height: calc(100%/3 - 10px);
        z-index: 10;
        position: relative;
      }
    }
    .col:nth-child(1){
      .row:nth-child(1){
        height: calc(100%/3*2 - 10px);
      }
    }
    .col:nth-child(2){
      padding-top: 60px;
      .row:nth-child(1){
        height: calc(100%/3*2 - 10px);
      }
      .row:nth-child(2){
        height: calc(100%/3 - 10px);
      }
    }
    .col:nth-child(3){
      .row:nth-child(1){
        height: calc(100%/3*2 - 10px);
      }
    }
  }
}
</style>
